<template>
    <div class="login">
      <h2>供应链金融管理平台</h2>
      <el-form class="form" :model="form" :rules="rules" ref="formref">
        <el-form-item prop="adminname">
          <el-input v-model="form.adminname" placeholder="输入账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" @click="onSubmit(formref)"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup >
  // import { loginlink } from "@/apis/Login.ts";
  import { ref } from "vue";
  import { ElNotification } from "element-plus";
  import "element-plus/es/components/notification/style/css";
  import { useUserInfoStore } from "@/stores/userinfo";
  import { useRouter } from "vue-router";
  
  var userInfoStore = useUserInfoStore();
  var router = useRouter();
  
  var form = ref({ adminname: "", password: "" });
  var formref = ref();
  const rules = {
    adminname: [{ required: true, message: "请输入账号", trigger: "change" }],
    password: [{ required: true, message: "请输入密码", trigger: "change" }],
  };
  var onSubmit = (formEl) => {
    // console.log(from.value);
    // console.log(formEl);
    loginlink(form.value).then((ok) => {
      console.log(ok);
      if (ok.data.code == 200) {
        //提示"登陆成功!"
        ElNotification.closeAll();
        ElNotification.success({ message: "登陆成功!" });
  
        //保存用户信息
        userInfoStore.save_userinfo(ok.data.data);
  
        //跳转到首页
        router.push("/home");
      } else {
        //提示"登陆失败!"
        ElNotification.closeAll();
        ElNotification.error({ message: "登陆失败!" });
      }
    });
  };
  </script>
  
  <style scoped>
  .login {
    height: 100%;
    background: url(../assets/login_bg.jpg) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .login h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .login .form {
    min-width: 300px;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
  }
  .login .form .btn {
    width: 100%;
  }
  </style>